<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>出租车</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/loading_icon.css" />
		<style type="text/css">
			/**{
				border: 1px solid;
			}*/
			
			body {
				background-color: #F5F5F5;
			}
			
			#taxi_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 20%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 60%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
			}
			
			.weui_navbar_item b {
				display: block;
				height: 2em;
				line-height: 2em;
			}
			
			#feeBtn b {
				border-left: 1px solid #FFFFFF;
				border-right: 1px solid #FFFFFF;
			}
			
			.weui_tab_bd_item {
				margin-top: 7px;
			}
			
			#allmap {
				width: 100%;
				height: 100px;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
			/*----收费标准----*/
			
			#fee img,
			#company img {
				width: 100%;
			}
			
			.taxi_right_fix {
				position: fixed;
				right: 0px;
				top: 140px;
				width: 100px;
				height: 300px;
				padding: 10px 25px;
			}
			
			#taxiRightBtn_1,
			#taxiRightBtn_2,
			#taxiRightBtn_3 {
				width: 70px;
				height: 70px;
				color: #FFFFFF;
				font-size: 1.2em;
				margin-bottom: 30px;
				border-radius: 35px;
				text-align: center;
				line-height: 70px;
				background-color: #0070B4;
				opacity: 0.7;
			}
			
			.taxi_bottom_fix {
				position: fixed;
				bottom: 40px;
				width: 100%;
				max-width: 640px;
				min-width: 320px;
				margin: 0 auto;
				text-align: center;
			}
			
			.taxi_bottom_fix a {
				display: block;
				color: #FFFFFF;
				width: 200px;
				height: 50px;
				line-height: 47px;
				background-color: #0070B4;
				opacity: 0.7;
				border-radius: 30px;
				font-size: 1.3em;
			}
			
			.loading_icon {
				width: 1.3em;
				vertical-align: middle;
				margin-top: -2px;
			}
			
			#taxiNum {
				font-size: 1.1em;
			}
			
			.positionBefore_icon {
				left: 28%;
				width: 44%;
				position: fixed;
				z-index: 9;
			}
			/* 出租车招车点列表样式 */
			
			#zcdUl {
				background-color: #FFFFFF;
			}
			
			#zcdUl li {
				border-bottom: 1px dashed #DEDEDE;
				padding: 0.8em;
				padding-top: 1em;
			}
			
			#zcdUl li p {
				color: #666666;
				/*border: 1px solid;*/
				margin-bottom: 5px;
			}
			
			#zcdUl li p span {
				color: #0070B4;
			}
			
			.weui_tab {
				margin-top: 70px;
			}
			/*顶部右侧切换城市按钮*/
			
			.app_head_right {
				width: 20%;
				float: right;
				text-align: right;
				padding-top: 8px;
			}
			
			.app_head_right a {
				font-size: 1.2em;
				color: #FFFFFF;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
			}
			
			.mask {
				position: fixed;
				top: 0;
				height: 100%;
				width: 100%;
				z-index: 100;
			}
			
			body {
				height: 100%;
			}
			/*底部弹出框样式*/
			
			.weui_cell p {
				color: #0070B4;
				font-size: 1.2em;
				font-family: "黑体";
			}
			
			.weui_cell {
				height: 60px !important;
			}
			
			.picker-button {
				color: #0070B4 !important;
			}
			
			.sfbz {
				padding: 10px;
			}
			
			#fee .sfbz h1 {
				font-family: "黑体";
				font-weight: bold;
				font-size: 1.1em;
				border-bottom: 1px solid #D5D5D5;
				padding-bottom: 8px;
			}
			
			#fee .sfbz p {
				margin-top: 8px;
				color: #676767;
				height: 25px;
				line-height: 25px;
				font-size: 1.05em;
			}
			
			#loadingIcon {
				width: 100%;
				position: absolute;
				top: 50%;
				z-index: 6666;
			}
			
			.weui_dialog {
				z-index: 9999999;
			}
			
			.BMap_bubble_title {
				color: #006FB5;
				font-size: 1.1em;
			}
		</style>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<div id="loadingIcon">
			<div class="loading">
				<span>畅</span>
				<span>行</span>
				<span>吉</span>
				<span>林</span>
			</div>
		</div>
		<div id="taxi_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a href="index01.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">出租车信息</p>
				</div>
				<div class="app_head_right">
					<a href="javascript:;" class="iconfont" id="JLcitySelect" style="display: none;">长春 &#xe6d5;</a>
				</div>
			</div>
			<div class="weui_tab">
				<!--选择步行公交自驾按钮区域-->
				<div class="weui_navbar" id="secTitle">
					<a href="#nearby" class="weui_navbar_item weui_bar_item_on" id="mainBtn">
						<b>附近出租</b>
					</a>
					<a href="#fee" class="weui_navbar_item" id="feeBtn">
						<b>收费标准</b>
					</a>
					<a href="#company" class="weui_navbar_item" id="companyBtn">
						<b style="border: none;">招车点</b>
					</a>
				</div>
				<div class="weui_tab_bd">
					<div id="nearby" class="weui_tab_bd_item weui_tab_bd_item_active">
						<div id="allmap"></div>
						<div class="taxi_right_fix">
							<div id="taxiRightBtn_1" onclick="changeFarAway(this)">500m</div>
							<!--<div id="taxiRightBtn_2" onclick="changeTaxiType(this)">空车</div>-->
							<div id="taxiRightBtn_3" onclick="reloadBtn()">刷新</div>
						</div>
						<div class="taxi_bottom_fix">
							<a>附近有<b id="taxiNum"><img src="img/taxi/loading_icon_1.gif" class="loading_icon"/></b>辆出租车
							</a>
						</div>
					</div>
					<div id="fee" class="weui_tab_bd_item">
						<div class="sfbz" id="sfbz_cc">
							<h1>根据国家城市出租汽车计价器检定规程JJG512—2009文件号所规定标准执行的再根据本市实际情况的制定：</h1>
							<p>1、基础公里数2.5公里。</p>
							<p>2、每公里运价为1.30/公里。</p>
							<p>3、单程运营时每公里加收50%空驶费。</p>
							<p>4、每候时2分30秒加费一次，每次一元。</p>
							<p>5、每行驶500米加费一次，每次一元。</p>
							<p>6、累计加费方式为四舍五入。</p>
						</div>
						<div class="sfbz" id="sfbz_sy" style="display: none;">
							<h1>收费标准</h1>
							<p>起步价 5元/2.5公里</p>
							<p>距离递增价：1.5元/公里</p>
							<p>夜间计费标准 8.00元/2.5公里(22时至次日4时)</p>
						</div>
					</div>
					<div id="company" class="weui_tab_bd_item">
						<!--<img src="img/taxi/taxi_gongsineirong.png" />-->
						<ul id="zcdUl">
							<!--<li>
								<p>位置: 长春市黄河路客运站</p>
								<p>地址: 宽城区人民大街226号</p>
								<p>电话: 0431-87691234</p>
							</li>
							<li>
								<p>位置: 长春市高速公路客运站</p>
								<p>地址: 人民大街8899号</p>
								<p>电话: 0431-87691234</p>
							</li>
							<li>
								<p>位置: 长春市黄河路客运站</p>
								<p>地址: 宽城区人民大街226号</p>
								<p>电话: 0431-87691234</p>
							</li>
							<li>
								<p>位置: 长春市高速公路客运站</p>
								<p>地址: 人民大街8899号</p>
								<p>电话: 0431-87691234</p>
							</li>
							<li>
								<p>位置: 长春市黄河路客运站</p>
								<p>地址: 宽城区人民大街226号</p>
								<p>电话: 0431-87691234</p>
							</li>
							<li>
								<p>位置: 长春市高速公路客运站</p>
								<p>地址: 人民大街8899号</p>
								<p>电话: 0431-87691234</p>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/whichPhone.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var city; //当前城市名
			var whichCity; //请求数据需要的type参数
			var url_flag; //url后缀城市字符串
			//得到当前位置json字符串信息 及经纬度坐标 海拔 移动 移动速度的方法
			function geoInf(position) {
				console.log("position---->" + JSON.stringify(position));
				var addressStr = position.addresses;
				var codns = position.coords; //获取地理坐标信息；
				var lat = codns.latitude; //获取到当前位置的纬度；
				x = lat;
				var longt = codns.longitude; //获取到当前位置的经度
				y = longt;
				//				console.log("安卓");
				src = new plus.maps.Point(Number(y), Number(x));
				var srcP = new BMap.Point(y, x);
				getBaiduPoint(srcP);

				var addressStr; //地址字符串
				//判断设备是否为IOS
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if(isiOS == true) {
					//IOS系统
					if(position.address.province) {
						addressStr = position.address.province; //判断是否是省
					} else {
						addressStr = position.address.city;
					}
				} else {
					//					alert(JSON.stringify(position.address));
					addressStr = position.address.province;
				}

				if(addressStr.indexOf("长春") > -1) {
					whichCity = "cc_taxi_gps_info";
					url_flag = "/cc";
				} else {
					whichCity = "cc_taxi_gps_info";
					url_flag = "/cc";
				}
				//				else if(addressStr.indexOf("松原") > -1) {
				//					whichCity = "sy_taxi_gps_info";
				//					url_flag = "-sy/sy";
				//				}

			}

			function getBaiduPoint(ggPoint) {
				var convertor = new BMap.Convertor();
				var pointArr = [];
				pointArr.push(ggPoint);
				convertor.translate(pointArr, 3, 5, translateCallback)
			}

			//安卓版转换
			translateCallback = function(data) {
				if(data.status === 0) {
					//dst = new plus.maps.Point(data.points[0].lng,data.points[0].lat);
					var pointY = data.points[0].lng;
					var pointX = data.points[0].lat;
					//判断设备是否为IOS
					var u = navigator.userAgent;
					var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
					var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
					if(isiOS == true) {
						//IOS系统
						//						console.log("Ios");
						src = new plus.maps.Point(Number(pointY), Number(pointX - 0.0037));
						pointY = pointY + 0.0068;
						pointX = pointX + 0.0021;
						//						var startPstr = new BMap.Point(pointY, pointX);
						//						var startPstr = new BMap.Point(125.32545,43.883686);
					}

					var baiduPoint = new BMap.Point(pointY, pointX);
//					var baiduPoint = new BMap.Point(125.325712, 43.883753);//测试 当前位置为吉林省交通运输厅 hzs！！！
					var bdMk = new BMap.Marker(baiduPoint);
					map.centerAndZoom(baiduPoint, 15);
					map.addOverlay(bdMk);

					map.panTo(baiduPoint);
					nowPoint = baiduPoint;

					var distance = $("#taxiRightBtn_1").html().replace("m", "");
					var Distance = parseInt(distance) == 500 ? 450 : 900;

					$.ajax({
						type: "post",
						url: "http://111.26.219.36:9595/jt809a-chuzu" + url_flag,
						data: {
							"type": whichCity,
							"LNG": baiduPoint.lng, //125.32545,
							"LAT": baiduPoint.lat, //43.883686,
							"RANGE": Distance
						},
						async: false,
						cache: false,
						dataType: "jsonp", //数据类型为jsonp
						jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
						jsonpCallback: "jsonpCallback1",
						success: function(data) {
							$("span[title='出租车']").remove(); //清空所有线上的出租车图标
							//								console.log(data);
							var taxiJson = eval(data.DATA);
							//								console.log(taxiJson);
							$("#taxiNum").html(taxiJson.length);
							$("#loadingIcon").hide();

							map.enableAutoResize();
							var circle = new BMap.Circle(baiduPoint, parseInt(Distance) + 80, {
								strokeColor: "#FFFFFF",
								strokeWeight: 1,
								fillOpacity: 0.4,
								fillColor: "#666666"
							}); //创建圆
							map.addOverlay(circle); //增加圆

							// 随机向地图添加25个标注
							for(var i = 0; i < taxiJson.length; i++) {
								var point = new BMap.Point(taxiJson[i].jingdu, taxiJson[i].weidu);
								//								var car_Mk = new BMap.Marker(point);
								var msg = "车牌号：" + taxiJson[i].chepaihao;
								addMarker(point, msg);
								//								addClickHandler(msg, car_Mk);
							}
						},
						error: function(data) {
							$.alert("连接超时，请稍后再试", "提示");
						}
					});

					//点击小车图标显示详情信息的方法
					function addClickHandler(content, marker) {
						marker.addEventListener("click", function(e) {
							openInfo(content, e);
							//							console.log(content);
						});
					}

					function openInfo(content, e) {
						var opts = {
							width: 100, // 信息窗口宽度
							title: "详情信息", // 信息窗口标题
							enableMessage: true //设置允许信息窗发送短息
							//message: ""
						}
						var p = e.target;
						var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
						var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
						map.openInfoWindow(infoWindow, point); //开启信息窗口
					}

					// 编写自定义函数,创建标注
					function addMarker(point, msg) {
						//创建小汽车图标
						//··················
						var taxiIcon = new BMap.Icon("img/taxi/taxi_yello.png", new BMap.Size(25, 37));
						var marker = new BMap.Marker(point, {
							icon: taxiIcon,
							title: "出租车",
						}); // 创建标注

						map.addOverlay(marker);
						addClickHandler(msg, marker);
					}

					var geoc = new BMap.Geocoder();

					if($("#taxiRightBtn_1").html().indexOf("500") > -1) {
						map.setZoom(16);
					} else {
						map.setZoom(15);
					}
					//					}

				} else {
					$.alert("定位失败，请检查您是否打开了定位服务", "提示");
				}
			}
			
			// 通过定位模块获取位置信息
			function getGeocode() {
				map.clearOverlays(); //清除地图上所有覆盖物
				plus.geolocation.getCurrentPosition(geoInf, {
					geocode: true
				});
			}

			function reloadBtn() {
				getGeocode();
			}

			//切换城市
			var city = "cc"; //设置城市名为全局
			$("#JLcitySelect").select({
				title: "切换城市 省内出租",
				items: [{
					title: "长春",
					value: "cc",
				}, {
					title: "松原",
					value: "sy",
				}],
				onOpen: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").show();
				},
				onClose: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").hide();
				},
				onChange: function(d) {
					$("#JLcitySelect").html(d.titles + " &#xe6d5;");
					$("#opacityDiv").hide();
					city = d.values;
					getZcdMsg(city);
					sfbz_city();
					setTimeout("taxiMethod()", 1500);
				}
			});

			//判断收费标准切换城市
			function sfbz_city() {
				if($("#JLcitySelect").html().indexOf("长春") > -1) {
					$("#sfbz_cc").show();
					$("#sfbz_sy").hide();
				} else { //松原
					$("#sfbz_sy").show();
					$("#sfbz_cc").hide();
				}
			}

			$(function() {
				//安装APP后第一次提醒用户"目前只有长春和松原的出租信息"
				if(!localStorage.tsAlert) {
					$.alert("目前只提供长春市出租车信息", "提示", function() {
						var arr = ["已提示过"]
						localStorage.tsAlert = JSON.stringify(arr);
					});
				}

				var h = document.documentElement.clientHeight;
				var mapH = h - 70 - 57;
				$("#loadingIcon").css("top", h / 2);
				$("#allmap").height(mapH);
				$("#fee img").height(mapH);

				// 扩展API加载完毕后调用onPlusReady回调函数
				document.addEventListener('plusready', getGeocode, false);
				//				document.addEventListener('plusready', getGeocode, false);
				//				setInterval("taxiMethod()",10000);//实时刷新
			});
			
			
			
			// 百度地图API功能
			var map = new BMap.Map("allmap", {
				enableMapClick: false,
				minZoom: 11, //设置地图允许的最小/大级别
				maxZoom: 19
			}); //构造底图时，关闭底图可点功能
			var point = new BMap.Point(125.322354, 43.886932);
			map.centerAndZoom(point, 16);
			var nowPoint;

			function changeFarAway(t1) {
				if(t1.innerHTML == "500m") {
					$("#taxiNum").html('<img src="img/taxi/loading_icon_1.gif" class="loading_icon"/>');
					$("#loadingIcon").show();
					t1.innerHTML = "1000m";
					// 扩展API加载完毕后调用onPlusReady回调函数 
					getGeocode();
				} else {
					$("#taxiNum").html('<img src="img/taxi/loading_icon_1.gif" class="loading_icon"/>');
					$("#loadingIcon").show();
					t1.innerHTML = "500m";
					// 扩展API加载完毕后调用onPlusReady回调函数 
					getGeocode();
				}
			}
			$("#mainBtn").click(function() {
				//				if($("#taxiNum").html())
				//				alert($("#taxiNum").html());
			});
			$("#feeBtn").click(function() {
				$("#loadingIcon").hide();
			});
			$("#companyBtn").click(function() {
				$("#loadingIcon").hide();
			});
			$(".weui_navbar_item").click(function() {
				$("#JLcitySelect").show();
				if($(this).children().html().indexOf("招车点") > -1) { //当点击查询招车点信息时
					$("#loadingIcon").show(); //显示loading图标
					getZcdMsg(city);
				} else if($(this).children().html().indexOf("附近出租") > -1) { //当点击查询收费标注怒信息时
					$("#JLcitySelect").hide();
				}
			});

			//获取长春||松原招车点信息
			function getZcdMsg(city) {
				$("#loadingIcon").show();
				$("#zcdUl").html("");
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "taxi_station_info",
						"AREA": city
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data);
						if(data.MSG == "成功") {
							for(var i = 0; i < eval(data.DATA).length; i++) {
								var li = $('<li></li>');
								var p1 = $('<p><span>名称：</span>' + eval(data.DATA)[i].TAXISTATIONNAME + '</p>');
								var p2 = $('<p><span>地址：</span>' + eval(data.DATA)[i].TAXI_STOP_ADDRESS + '</p>');
								var p3 = $('<p><span>电话：</span>' + eval(data.DATA)[i].COMPLAINTS_HOTLINE + '</p>');
								$(li).append(p1, p2, p3);
								$("#zcdUl").append(li);
							}
						}
						$("#loadingIcon").hide();
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}
		</script>

	</body>

</html>